import { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Code, FileCode, Database, RefreshCw, Link, Clock, Hash, 
  Image, Type, Calculator, QrCode, GitBranch, FileText, 
  ImagePlus, Palette, Server, Shrink 
} from 'lucide-react';
import { ArrowRight, Download, Github, Heart, Star, Zap, Calendar, Coffee, Users, ArrowDown, ArrowUp, Repeat } from 'lucide-react';



// Mock data for features
const features = [
   {
    id: 1,
    category: "编辑器",
    title: "JSON编辑器",
    description: "强大的JSON格式化、验证和编辑工具，支持语法高亮和错误提示",
    icon: <Code className="h-10 w-10 text-blue-500" />
  },
  {
    id: 2,
    category: "编辑器",
    title: "XML编辑器",
    description: "专业的XML编辑工具，支持语法高亮、格式化和验证功能",
    icon: <FileCode className="h-10 w-10 text-blue-500" />
  },
  {
    id: 3,
    category: "编辑器",
    title: "SQL编辑器",
    description: "SQL语句编辑与格式化工具，支持多种数据库语法高亮",
    icon: <Database className="h-10 w-10 text-blue-500" />
  },
  {
    id: 3,
    category: "编辑器",
    title: "代码小抄",
    description: "支持10余种主流编程语言的代码书写，语法高亮，代码格式化功能",
    icon: <Database className="h-10 w-10 text-blue-500" />
  },
  {
    id: 4,
    category: "编辑器",
    title: "JSON XML互转",
    description: "实现JSON与XML格式之间的快速转换，保留数据结构完整性",
  icon: <RefreshCw className="h-10 w-10 text-purple-500" />
  },
  {
    id: 5,
    category: "编辑器",
    title: "JSON YAML互转",
    description: "在JSON和YAML格式之间无缝转换，支持复杂数据结构",
  icon: <Repeat className="h-10 w-10 text-purple-500" />
  },
  {
    id: 6,
    category: "编辑器",
    title: "JSON JavaScript互转",
    description: "JSON与JavaScript对象之间的相互转换，支持函数和特殊类型",
icon: <RefreshCw className="h-10 w-10 text-purple-500" />
  },
  {
    id: 13,
    category: "编辑器",
    title: "Unicode编解码",
    description: "Unicode编码与字符串之间的相互转换工具",
icon: <Type className="h-10 w-10 text-indigo-500" />
  },
   {
    id: 7,
    category: "转码工具",
    title: "URL解析器",
    description: "解析URL参数，提取查询字符串和路径信息",
    icon: <Link className="h-10 w-10 text-emerald-500" />
  },
  {
    id: 8,
    category: "转码工具",
    title: "URL编解码",
    description: "对URL进行编码和解码，支持多种编码格式",
    icon: <Link className="h-10 w-10 text-emerald-500" />
  },
  {
    id: 9,
    category: "转码工具",
    title: "时间戳转换",
    description: "时间戳与日期时间之间的相互转换，支持多种格式",
    icon: <Clock className="h-10 w-10 text-amber-500" />
  },
  {
    id: 10,
    category: "转码工具",
    title: "Hex编解码",
    description: "十六进制数据与字符串之间的相互转换工具",
    icon: <Hash className="h-10 w-10 text-amber-500" />
  },
  {
    id: 11,
    category: "转码工具",
    title: "Base64文本",
    description: "文本与Base64编码之间的相互转换",
    icon: <Code className="h-10 w-10 text-amber-500" />
  },
   {
    id: 12,
    category: "转码工具",
    title: "Base64图像",
    description: "图像与Base64编码之间的相互转换，支持多种图像格式",
    icon: <Image className="h-10 w-10 text-amber-500" />
  },
  {
    id: 14,
    category: "转码工具",
    title: "进制转换",
    description: "不同进制之间的转换工具，支持二进制、八进制、十进制和十六进制",
    icon: <Calculator className="h-10 w-10 text-indigo-500" />
  },
  {
    id: 15,
    category: "转码工具",
    title: "二维码解析",
    description: "解析二维码图片中的信息，支持多种二维码格式",
    icon: <QrCode className="h-10 w-10 text-indigo-500" />
  },
  {
    id: 16,
    category: "工具集",
    title: "差异对比",
    description: "比较两段文本之间的差异，高亮显示不同之处",
    icon: <GitBranch className="h-10 w-10 text-indigo-500" />
  },
  {
    id: 16,
    category: "工具集",
    title: "字数统计",
    description: "比较两段文本之间的差异，高亮显示不同之处",
    icon: <GitBranch className="h-10 w-10 text-indigo-500" />
  },
  {
    id: 16,
    category: "工具集",
    title: "图片水印",
    description: "比较两段文本之间的差异，高亮显示不同之处",
    icon: <GitBranch className="h-10 w-10 text-indigo-500" />
  },
  {
    id: 16,
    category: "工具集",
    title: "图片区色",
    description: "比较两段文本之间的差异，高亮显示不同之处",
    icon: <GitBranch className="h-10 w-10 text-indigo-500" />
  }
];

// Group features by category
const groupedFeatures = features.reduce((groups, feature) => {
  const group = groups[feature.category] || [];
  group.push(feature);
  groups[feature.category] = group;
  return groups;
}, {});

const featureCategories = Object.keys(groupedFeatures);

// Mock data for version history
const versionHistory = [
  {
    version: "1.2.0",
    date: "2025-09-15",
    changes: [
      "新增JSON与JavaScript互转功能",
      "优化代码编辑器性能",
      "修复已知bug"
    ]
  },
  {
    version: "1.1.0",
    date: "2025-07-22",
    changes: [
      "新增行为分析模块",
      "添加深色主题支持",
      "改进用户界面"
    ]
  },
  {
    version: "1.0.0",
    date: "2024-11-10",
    changes: [
      "初始版本发布",
      "基础JSON编辑功能",
      "格式转换工具"
    ]
  },
  {
    version: "0.9.0",
    date: "2024-09-05",
    changes: [
      "Beta版本发布",
      "添加XML编辑器",
      "基础格式转换功能"
    ]
  },
  {
    version: "0.8.0",
    date: "2024-07-18",
    changes: [
      "Alpha版本发布",
      "JSON编辑器基础功能",
      "主题设置"
    ]
  },
  {
    version: "0.7.0",
    date: "2024-05-22",
    changes: [
      "内部测试版",
      "核心功能开发",
      "基础UI框架搭建"
    ]
  }
];

// Mock data for donations
const donations = [
  {
    id: 1,
    name: "张**",
    amount: 50,
    date: "2025-09-10",
    message: "支持优秀开源项目"
  },
  {
    id: 2,
    name: "李**",
    amount: 100,
    date: "2025-08-25",
    message: "工具非常实用，感谢开发者"
  },
  {
    id: 3,
    name: "王**",
    amount: 30,
    date: "2025-08-15",
    message: "加油！期待更多功能"
  }
];

export default function Home() {
  const [activeVersion, setActiveVersion] = useState(versionHistory[4].version);
  
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* Navigation */}
      <header className="bg-white text-gray-900 shadow-md sticky top-0 z-50 transition-all duration-300">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <div className="flex items-center space-x-3">
        <div className="w-12 h-12 rounded-lg bg-blue-600 shadow-lg flex items-center justify-center transform hover:scale-105 transition-transform duration-300">
          <span className="text-white font-bold text-2xl">O</span>
        </div>
        <h1 className="text-2xl font-bold tracking-tight text-gray-900">O-Studio</h1>
          </div>
           <nav className="hidden md:flex space-x-8">
              <motion.a 
                href="#features" 
                  className="text-gray-900 hover:text-blue-700 font-medium relative py-2 px-6 overflow-hidden group"
                 whileHover={{ 
                   scale: 1.05,
                   y: -2
                 }}
                 transition={{
                   type: "spring",
                   stiffness: 300,
                   damping: 10
                 }}
               >
                 <span className="relative z-10">功能</span>
                 <span className="absolute inset-0 bg-blue-100 transform origin-left scale-x-0 transition-transform duration-300 ease-in-out group-hover:scale-x-100"></span>
                    <span className="absolute -bottom-1 left-0 w-0 h-2 bg-blue-600 shadow-md transition-all duration-400 ease-out group-hover:w-full"></span>
               </motion.a>
              <motion.a 
                href="#value" 
                  className="text-gray-900 hover:text-blue-700 font-medium relative py-2 px-6 overflow-hidden group"
                 whileHover={{ 
                   scale: 1.05,
                   y: -2
                 }}
                 transition={{
                   type: "spring",
                   stiffness: 300,
                   damping: 10
                 }}
               >
                 <span className="relative z-10">价值</span>
                 <span className="absolute inset-0 bg-blue-100 transform origin-left scale-x-0 transition-transform duration-300 ease-in-out group-hover:scale-x-100"></span>
                    <span className="absolute -bottom-1 left-0 w-0 h-2 bg-blue-600 shadow-md transition-all duration-400 ease-out group-hover:w-full"></span>
               </motion.a>
              <motion.a 
                href="#versions" 
                  className="text-gray-900 hover:text-blue-700 font-medium relative py-2 px-6 overflow-hidden group"
                 whileHover={{ 
                   scale: 1.05,
                   y: -2
                 }}
                 transition={{
                   type: "spring",
                   stiffness: 300,
                   damping: 10
                 }}
               >
                 <span className="relative z-10">版本</span>
                 <span className="absolute inset-0 bg-blue-100 transform origin-left scale-x-0 transition-transform duration-300 ease-in-out group-hover:scale-x-100"></span>
                    <span className="absolute -bottom-1 left-0 w-0 h-2 bg-blue-600 shadow-md transition-all duration-400 ease-out group-hover:w-full"></span>
               </motion.a>
              <motion.a 
                href="#donate" 
                  className="text-gray-900 hover:text-blue-700 font-medium relative py-2 px-6 overflow-hidden group"
                 whileHover={{ 
                   scale: 1.05,
                   y: -2
                 }}
                 transition={{
                   type: "spring",
                   stiffness: 300,
                   damping: 10
                 }}
               >
                 <span className="relative z-10">捐赠</span>
                 <span className="absolute inset-0 bg-blue-100 transform origin-left scale-x-0 transition-transform duration-300 ease-in-out group-hover:scale-x-100"></span>
                    <span className="absolute -bottom-1 left-0 w-0 h-2 bg-blue-600 shadow-md transition-all duration-400 ease-out group-hover:w-full"></span>
               </motion.a>
              <motion.a 
                href="#download" 
                  className="text-gray-900 hover:text-blue-700 font-medium relative py-2 px-6 overflow-hidden group"
                 whileHover={{ 
                   scale: 1.05,
                   y: -2
                 }}
                 transition={{
                   type: "spring",
                   stiffness: 300,
                   damping: 10
                 }}
               >
                 <span className="relative z-10">下载</span>
                 <span className="absolute inset-0 bg-blue-100 transform origin-left scale-x-0 transition-transform duration-300 ease-in-out group-hover:scale-x-100"></span>
                    <span className="absolute -bottom-1 left-0 w-0 h-2 bg-blue-600 shadow-md transition-all duration-400 ease-out group-hover:w-full"></span>
               </motion.a>
           </nav>
          <div className="md:hidden">
            <button className="text-white hover:text-yellow-300 transition-colors">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </header>

      <main className="flex-grow">
        {/* Hero Section */}
         <section className="bg-gradient-to-br from-blue-600 to-indigo-600 text-white py-20">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                O-Studio <span className="text-yellow-300">程序员的瑞士军刀</span>
              </h1>
              <p className="text-xl md:text-2xl mb-8 text-blue-100">
                一款专为程序员开发的多功能工具箱，让您的开发工作更高效
              </p>
              <div className="flex flex-col sm:flex-row justify-center gap-4">
                <a 
                  href="#download" 
                  className="bg-white text-blue-600 font-bold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2"
                >
                  <Download className="w-5 h-5" />
                  立即下载
                </a>
                <a 
                  href="#features" 
                  className="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-lg hover:bg-white/10 transition-all duration-300"
                >
                  了解功能
                </a>
              </div>
            </div>
          </div>
        </section>

        {/* Features Section */}
        <section id="features" className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">强大功能，一站式解决</h2>
              <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                O-Studio集成多种实用工具，满足程序员日常开发需求
              </p>
            </div>
            
             {/* Feature Categories */}
             {Object.entries(groupedFeatures).map(([category, features]) => (
               <div key={category} className="mb-12">
                 <h3 className="text-2xl font-bold mb-6 text-gray-900 flex items-center">
                   <span className="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
                     {category.charAt(0)}
                   </span>
                   {category}
                 </h3>
                 
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                   {features.map((feature) => (
                     <div 
                       key={feature.id} 
                       className="bg-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-1 border border-gray-100"
                     >
                       <div className="mb-4 text-center">{feature.icon}</div>
                       <h3 className="text-xl font-bold mb-2 text-gray-900 text-center">{feature.title}</h3>
                       <p className="text-gray-600 text-center">{feature.description}</p>
                     </div>
                   ))}
                 </div>
               </div>
             ))}
             
             {/* Additional Features Preview */}
             <div className="mt-16 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 border border-blue-100">
               <h3 className="text-2xl font-bold text-center text-gray-900 mb-8">更多实用工具</h3>
               <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                  {[
                   { title: "字数统计", icon: <FileText className="h-5 w-5 text-blue-500" /> },
                   { title: "图片水印", icon: <ImagePlus className="h-5 w-5 text-purple-500" /> },
                   { title: "代码小抄", icon: <FileText className="h-5 w-5 text-emerald-500" /> },
{ title: "文本压缩", icon: <Shrink className="h-5 w-5 text-amber-500" /> },
                   { title: "图片取色", icon: <Palette className="h-5 w-5 text-indigo-500" /> },
                   { title: "HTTP请求", icon: <Server className="h-5 w-5 text-blue-500" /> },
                 ].map((item, index) => (
                   <div key={index} className="bg-white rounded-lg p-4 text-center shadow-sm border border-gray-100 hover:border-blue-200 transition-colors">
                     <div className="flex justify-center mb-2">{item.icon}</div>
                     <p className="text-sm font-medium text-gray-700">{item.title}</p>
                   </div>
                 ))}
               </div>
               <div className="text-center mt-6">
                 <p className="text-gray-600">还有更多实用工具等您探索</p>
               </div>
             </div>
            
            <div className="mt-16 bg-blue-50 rounded-xl p-8 border border-blue-100">
              <div className="flex flex-col md:flex-row items-center gap-8">
                <div className="md:w-1/2">
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">支持多种格式转换</h3>
                  <ul className="space-y-3 text-gray-700">
                    <li className="flex items-center gap-2">
                      <Star className="w-5 h-5 text-yellow-500 fill-yellow-500" />
                      JSON/XML/YAML 相互转换
                    </li>
                    <li className="flex items-center gap-2">
                      <Star className="w-5 h-5 text-yellow-500 fill-yellow-500" />
                      URL编解码与解析
                    </li>
                    <li className="flex items-center gap-2">
                      <Star className="w-5 h-5 text-yellow-500 fill-yellow-500" />
                      时间戳转换与格式化
                    </li>
                    <li className="flex items-center gap-2">
                      <Star className="w-5 h-5 text-yellow-500 fill-yellow-500" />
                      Base64/HEX 编解码
                    </li>
                  </ul>
                </div>
                <div className="md:w-1/2 bg-white p-6 rounded-lg shadow-md border border-gray-200">
                  <div className="flex justify-between items-center mb-4">
                    <span className="text-sm font-medium text-gray-500">JSON 编辑器</span>
                    <div className="flex gap-2">
                      <button className="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm">格式化</button>
                      <button className="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm">压缩</button>
                    </div>
                  </div>
                  <div className="bg-gray-900 text-green-400 p-4 rounded text-sm font-mono overflow-x-auto">
                    {`{
  "name": "O-Studio",
  "version": "1.2.0",
  "features": [
    "JSON编辑器",
    "格式转换",
    "数据解析",
    "行为分析"
  ],
  "author": "莫斐鱼"
}`}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Value Proposition Section */}
         <section id="value" className="py-20 bg-blue-50">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">为您带来的价值</h2>
              <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                O-Studio不仅是工具集合，更是提高开发效率的得力助手
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition-shadow">
                <div className="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                  <span className="text-blue-600 text-2xl font-bold">⏱️</span>
                </div>
                <h3 className="text-xl font-bold mb-3 text-gray-900">节省时间</h3>
                <p className="text-gray-600">
                  集成多种工具，无需在不同应用间切换，减少开发流程中断，提高工作效率。
                </p>
              </div>
              
              <div className="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition-shadow">
                <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
                  <span className="text-green-600 text-2xl font-bold">🔧</span>
                </div>
                <h3 className="text-xl font-bold mb-3 text-gray-900">简化流程</h3>
                <p className="text-gray-600">
                  统一的操作界面，一致的用户体验，降低学习成本，让您专注于解决问题本身。
                </p>
              </div>
              
              <div className="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition-shadow">
                <div className="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
                  <span className="text-purple-600 text-2xl font-bold">📈</span>
                </div>
                <h3 className="text-xl font-bold mb-3 text-gray-900">提升效率</h3>
                <p className="text-gray-600">
                  行为分析功能帮助您了解使用习惯，发现优化空间，持续提升开发效率。
                </p>
              </div>
            </div>
          </div>
        </section>

         {/* Version History Section */}
         <section id="versions" className="py-20 bg-white">
           <div className="container mx-auto px-4">
             <div className="text-center mb-16">
               <h2 className="text-3xl font-bold text-gray-900 mb-4">版本更新记录</h2>
               <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                 持续迭代，不断优化，为您提供更好的使用体验
               </p>
             </div>
             
             <div className="max-w-5xl mx-auto">
               {/* Horizontal Timeline Container */}
               <div className="relative">
                 {/* Timeline line */}
                 <div className="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 transform -translate-y-1/2 z-0"></div>
                 
                 {/* Timeline items */}
                <div className="flex flex-wrap justify-center space-x-6 pb-8 relative z-10">
                    {versionHistory.slice(0, 3).map((version, index) => (
                      <div 
                        key={version.version} 
                        className="min-w-[240px] md:min-w-[280px] mb-6"
                      >
                       {/* Timeline marker */}
                       <div className="w-8 h-8 rounded-full bg-blue-600 border-4 border-white shadow-md z-10 mx-auto mb-4 flex items-center justify-center text-white font-bold">
                         {index + 1}
                       </div>
                       
                       {/* Version content */}
                       <div className="bg-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-1">
                         <div className="flex justify-between items-center mb-4">
                           <h3 className="text-xl font-bold text-gray-900">{version.version}</h3>
                           <span className="text-gray-500 bg-blue-50 px-3 py-1 rounded-full text-sm">
                             {version.date}
                           </span>
                         </div>
                         <ul className="space-y-2 text-sm">
                           {version.changes.map((change, changeIndex) => (
                             <li key={changeIndex} className="flex items-start gap-2">
                               <span className="text-green-500 mt-1 flex-shrink-0">•</span>
                               <span className="text-gray-700">{change}</span>
                             </li>
                           ))}
                         </ul>
                       </div>
                     </div>
                   ))}
                 </div>
               </div>
               
               {/* More versions toggle */}
               <div className="mt-12 text-center">
                 <button 
                   id="toggleMoreVersions"
                   className="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg shadow-md hover:bg-blue-700 transition-all duration-300 flex items-center justify-center gap-2 mx-auto"
                   onClick={() => {
                     const moreVersions = document.getElementById('moreVersions');
                     const toggleBtn = document.getElementById('toggleMoreVersions');
                     if (moreVersions && toggleBtn) {
                       if (moreVersions.classList.contains('hidden')) {
                         moreVersions.classList.remove('hidden');
                         toggleBtn.innerHTML = '<ArrowUp className="w-5 h-5" /> 收起历史版本';
                       } else {
                         moreVersions.classList.add('hidden');
                         toggleBtn.innerHTML = '<ArrowDown className="w-5 h-5" /> 查看更多历史版本';
                       }
                     }
                   }}
                 >
                   <ArrowDown className="w-5 h-5" /> 查看更多历史版本
                 </button>
               
                 {/* Additional versions */}
                 <div id="moreVersions" className="hidden mt-8 pt-8 border-t border-gray-200">
                   <div className="flex flex-wrap justify-center gap-6">
                      {versionHistory.slice(3).map((version) => (
                       <div key={version.version} className="w-[280px]">
                         <div className="bg-gray-50 rounded-xl p-6 shadow-sm">
                           <div className="flex justify-between items-center mb-3">
                             <h3 className="text-lg font-bold text-gray-900">{version.version}</h3>
                             <span className="text-gray-500 bg-blue-50 px-3 py-1 rounded-full text-xs">
                               {version.date}
                             </span>
                           </div>
                           <ul className="space-y-1 text-xs text-gray-600">
                             {version.changes.slice(0, 2).map((change, changeIndex) => (
                               <li key={changeIndex} className="flex items-start gap-2">
                                 <span className="text-green-500 mt-1 flex-shrink-0">•</span>
                                 <span>{change}</span>
                               </li>
                             ))}
                             {version.changes.length > 2 && (
                               <li className="text-gray-400 italic">...更多更新内容</li>
                             )}
                           </ul>
                         </div>
                       </div>
                     ))}
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </section>

        {/* Donation Section */}
         <section id="donate" className="py-20 bg-blue-50">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">支持开源，共建生态</h2>
              <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                您的捐赠将帮助我们持续开发和改进O-Studio
              </p>
            </div>
            
            <div className="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
              <div className="lg:col-span-1">
                <div className="bg-white rounded-xl p-8 shadow-sm h-full">
                  <h3 className="text-2xl font-bold mb-6 text-gray-900">捐赠支持</h3>
                  <p className="text-gray-600 mb-8">
                    O-Studio是开源项目，您的每一份捐赠都将用于项目的持续开发和维护。
                  </p>
                   <button className="w-full bg-gradient-to-r from-amber-500 to-orange-500 text-white font-bold py-3 px-6 rounded-lg shadow hover:shadow-md transition-all duration-300 flex items-center justify-center gap-2">
                    <Coffee className="w-5 h-5" />
                    立即捐赠
                  </button>
                  <div className="mt-8 pt-6 border-t border-gray-100">
                    <h4 className="font-bold text-gray-900 mb-3">捐赠方式</h4>
                     <div className="mb-6">
                       <h4 className="font-bold text-gray-900 mb-3">捐赠二维码</h4>
                       <div className="grid grid-cols-2 gap-4">
                         <div className="bg-white p-3 rounded-lg border border-gray-200">
                           <p className="text-center text-sm mb-2">支付宝</p>
                           <img 
                             src="https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Alipay%20QR%20code%20for%20donation&sign=0f4e281d6154b0003f275a5917a5cae6" 
                             alt="支付宝捐赠二维码" 
                             className="w-full h-auto rounded"
                           />
                         </div>
                         <div className="bg-white p-3 rounded-lg border border-gray-200">
                           <p className="text-center text-sm mb-2">微信支付</p>
                           <img 
                             src="https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=WeChat%20Pay%20QR%20code%20for%20donation&sign=689b0021912222dfb388de775a4e86c8" 
                             alt="微信支付捐赠二维码" 
                             className="w-full h-auto rounded"
                           />
                         </div>
                       </div>
                     </div>
                     <ul className="space-y-2 text-gray-600">
                       <li className="flex items-center gap-2">• 支付宝</li>
                       <li className="flex items-center gap-2">• 微信支付</li>
                       <li className="flex items-center gap-2">• PayPal</li>
                       <li className="flex items-center gap-2">• 加密货币</li>
                     </ul>
                  </div>
                </div>
              </div>
              
              <div className="lg:col-span-2">
                <div className="bg-white rounded-xl p-8 shadow-sm h-full">
                  <h3 className="text-2xl font-bold mb-6 text-gray-900">捐赠记录</h3>
                  <div className="space-y-6">
                    {donations.map((donation) => (
                      <div key={donation.id} className="p-4 border border-gray-100 rounded-lg">
                        <div className="flex justify-between items-center mb-2">
                          <span className="font-bold text-gray-900">{donation.name}</span>
                          <span className="text-green-600 font-bold">¥{donation.amount}</span>
                        </div>
                        <div className="flex justify-between items-center text-sm">
                          <span className="text-gray-500">{donation.date}</span>
                          <span className="text-gray-600 italic">{donation.message}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                  
                  <div className="mt-8 pt-6 border-t border-gray-100">
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">总计捐赠：</span>
                      <span className="text-2xl font-bold text-gray-900">¥180</span>
                    </div>
                    <div className="flex justify-between items-center mt-2">
                      <span className="text-gray-600">捐赠人数：</span>
                      <span className="text-xl font-bold text-gray-900">3人</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Download Section */}
         <section id="download" className="py-20 bg-gradient-to-br from-indigo-600 to-purple-600 text-white">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-3xl font-bold mb-6">开始使用 O-Studio</h2>
              <p className="text-xl mb-10 text-blue-100">
                支持多种平台，选择适合您的版本下载
              </p>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                <a 
                  href="#" 
                  className="bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-colors rounded-xl p-6 flex flex-col items-center justify-center border border-white/20"
                >
                  <div className="text-4xl mb-4">🖥️</div>
                  <h3 className="text-xl font-bold mb-2">Windows</h3>
                  <p className="text-blue-100 mb-4">支持 Windows 10/11</p>
                  <span className="text-sm bg-white/20 px-3 py-1 rounded-full">64位</span>
                </a>
                
                <a 
                  href="#" 
                  className="bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-colors rounded-xl p-6 flex flex-col items-center justify-center border border-white/20"
                >
                  <div className="text-4xl mb-4">🍎</div>
                  <h3 className="text-xl font-bold mb-2">macOS</h3>
                  <p className="text-blue-100 mb-4">支持 macOS 12+</p>
                  <span className="text-sm bg-white/20 px-3 py-1 rounded-full">Apple Silicon</span>
                </a>
                
                <a 
                  href="#" 
                  className="bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-colors rounded-xl p-6 flex flex-col items-center justify-center border border-white/20"
                >
                  <div className="text-4xl mb-4">🐧</div>
                  <h3 className="text-xl font-bold mb-2">Linux</h3>
                  <p className="text-blue-100 mb-4">支持 Ubuntu 20.04+</p>
                  <span className="text-sm bg-white/20 px-3 py-1 rounded-full">AppImage</span>
                </a>
              </div>
              
              <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 inline-block border border-white/20">
                <p className="text-blue-100 mb-2">最新版本：{versionHistory[0].version}</p>
                <p className="text-sm text-blue-200">更新日期：{versionHistory[0].date}</p>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="bg-gray-900 text-gray-400 py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                  <span className="text-white font-bold text-sm">O</span>
                </div>
                <h3 className="text-white font-bold">O-Studio</h3>
              </div>
              <p className="mb-4">程序员的瑞士军刀</p>
              <div className="flex space-x-4">
                <a href="#" className="hover:text-white transition-colors">
                  <Github className="w-5 h-5" />
                </a>
                <a href="#" className="hover:text-white transition-colors">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
                  </svg>
                </a>
                <a href="#" className="hover:text-white transition-colors">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
                  </svg>
                </a>
              </div>
            </div>
            
            <div>
              <h4 className="text-white font-bold mb-4">产品</h4>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-white transition-colors">功能介绍</a></li>
                <li><a href="#" className="hover:text-white transition-colors">版本历史</a></li>
                <li><a href="#" className="hover:text-white transition-colors">下载</a></li>
                <li><a href="#" className="hover:text-white transition-colors">更新日志</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="text-white font-bold mb-4">资源</h4>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-white transition-colors">文档</a></li>
                <li><a href="#" className="hover:text-white transition-colors">教程</a></li>
                <li><a href="#" className="hover:text-white transition-colors">常见问题</a></li>
                <li><a href="#" className="hover:text-white transition-colors">支持</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="text-white font-bold mb-4">关于</h4>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-white transition-colors">作者</a></li>
                <li><a href="#" className="hover:text-white transition-colors">捐赠</a></li>
                <li><a href="#" className="hover:text-white transition-colors">开源协议</a></li>
                <li><a href="#" className="hover:text-white transition-colors">联系我们</a></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 pt-8 text-sm text-center">
            <p>© 2025 O-Studio. 保留所有权利。</p>
            <p className="mt-2">作者：莫斐鱼</p>
          </div>
        </div>
      </footer>
    </div>
  );
}